<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">

    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        function but1(){
            $.ajax({
                url:"http://localhost:9901/hello",
                method:"GET",
                success:function(data){
                    $("#showMsg").text(data);
                }
            });
        }


        function but2(){
            $.ajax({
                url:"http://localhost:9902/hello",
                method:"GET",
                success:function(data){
                    $("#showMsg").text(data);
                }
            });
        }

        function  but3() {

            // Ajax的JSONP降级跨域的问题底层是利用<script>标签来完成的
            // 利用<script>标签发送一个请求，请求携带了一个函数名称
            // 服务端接收这个函数名称，把服务端需要影响的值写到这个函数的参数里面，然后响应给浏览器
            // 此时浏览器接收到的就是一个调用函数的js代码，但是在之前提前定义好了一个函数
            $.ajax({
                url:"http://localhost:9902/hello",
                method:"GET",
                dataType:"JSONP",
                jsonpCallback:"jsonpCallback",
                success:function(data){
                    $("#showMsg").text(data);
                }
            });
        }

        function but4(){
            $.ajax({
                url:"http://9901.qf.com:9901/write",
                method:"GET",
                success:function(data){
                    $("#showMsg").text(data);
                }
            });
        }

        function but5(){
            $.ajax({
                url:"http://9901.qf.com:9901/read",
                method:"GET",
                success:function(data){
                    $("#showMsg").text(data);
                }
            });
        }

        function but6(){
            $.ajax({
                url:"http://9902.qf.com:9902/read",
                method:"GET",
                dataType:"JSONP",
                jsonpCallback:"jsonpCallback",
                success:function(data){
                    $("#showMsg").text(data);
                }
            });
        }
    </script>
</head>
<body>

<button onclick="but1()">访问9901</button>
<br>
<button onclick="but2()">访问9902</button>
<br>
<button onclick="but3()">访问9902,使用JSONP解决跨域的问题</button>
<br>
<a href="http://localhost:9902/hello">9902</a>
<img src="">
<form action="http://localhost:9902/hello">
    <input type="submit" value="提交">
</form>
<hr>
<button onclick="but4()">写Cookie9901</button>
<button onclick="but5()">读Cookie9901</button>
<button onclick="but6()">读Cookie9902</button>
<div id="showMsg"></div>
</body>
</html>